<template>
    <div class="exam-container">
        <el-skeleton :loading="data.isFirst" :rows="15" animated>
        <div class="head-content-search">
         <div style="display: flex">
          <div class="exam-top-addbtn">
            <el-date-picker
        v-model="searchDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="data.defaultTime"
        @change="date_Change"
       
      />
          </div>

          <!-- 搜索框 -->
          <div class="mySearch" style="flex: 1;">
            <el-input
      v-model="data.pages.keys"
      placeholder="输入关键字查询"
      class="input-with-select"
      style="margin-top:5px"
    >
      <template #prepend>
        <el-select v-model="data.type" placeholder="行为类型" style="width: 115px">
            <el-option
                v-for="item in data.options"
                :key="item"
                :label="item"
                :value="item"
                />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
          </div>

          <div style="flex:1">
            
          </div>
        
        </div>
      </div>





      <div style="margin-top: 10px">
        <el-table :data="data.data.data" v-loading="data.isLoad" :border="true">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="操作人"
            prop="author"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          <el-table-column
            label="平台"
            prop="version"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          <el-table-column
            label="行为类型"
            prop="group"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          <el-table-column
            label="行为"
            prop="action"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          <el-table-column
            label="结果"
            prop="author"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >

          <template #default="scope">
            <el-tag type="success" v-if=" scope.row.result==0">
                成功
            </el-tag>
            <el-tag type="danger" v-else>
                失败
            </el-tag>
          </template>
          </el-table-column>

          <el-table-column
            label="ip"
            prop="ip"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          
          <el-table-column
            label="时间"
            prop="time"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>
        


          <el-table-column label="操作" fixed="right" width="150">
                 <template #default="scope">
                    <el-button
                    type="primary"
                    size="small"
                    :loading="data.btnLoad"
                    @click="detail(scope.row)"
                    >详情</el-button
                  >
                 </template>
               
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="margin-top: 10px; padding-bottom: 10px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="data.pages.total"
            small
            :page-size="data.pages.limit"
            v-model:current-page="data.pages.page"
          />
        </div>
      </div>



    </el-skeleton>
        </div>
</template>

<script lang="ts" setup>
import { onMounted, ref,reactive, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {getActionTypes,getActionLogs} from '../../api/logs'
import timestampToTime from '../../utils/getTime'
import { useRouter } from 'vue-router';
const searchDate:any = ref('');
const router=useRouter();
let data = reactive({
    options:[],
    pages:{
        limit:10,
        page:1,
        keys:'',
        total:0
    },
    type:"",
    defaultTime:'',
    begin:"",
    end:"",
    data:{
      data:[]
    },
    isLoad:true,
    isFirst:true,
    btnLoad:false
});
//详情按钮事件
const detail=(r:any)=>{
    router.push("/log/action/detail/"+r.id)
}

//获取搜索类型
 const getActionType=()=>{
    getActionTypes({}).then((res:any)=>{
        if(res.result===0){
             data.options= res.data;
             data.options.unshift('全部');
        }
    });
 } 
 //日期改变事件
 const date_Change=()=>{
if(searchDate._rawValue!=null && searchDate._rawValue.length!=0){
    data.begin=timestampToTime.timestampToTime(new Date(searchDate._rawValue[0]).getTime());
    data.end=timestampToTime.timestampToTime(new Date(searchDate._rawValue[1]).getTime());
}
if(searchDate._rawValue==null){
    data.begin="";
    data.end=""
}  
 }

 //获取行为数据
 const getActionLog=()=>{
    data.isLoad=true;
    getActionLogs(
        {key:data.pages.keys,
         page:data.pages.page,
        limit:data.pages.limit,
        type:data.type,
        begin:data.begin,
        end:data.end  
    }
        ).then((res:any)=>{
        if(res.result===0){
            data.data=res.data;
            data.pages.total=res.data.total;   
           data.isLoad=false;
           data.isFirst=false;
            
        }
    });
 } 



 onMounted(() => {
    getActionType();
    getActionLog();
})

watchEffect(()=>{
    getActionLog();
})

</script>